<!DOCTYPE html>
<!--
     <details> and <summary> are implemented using V1 shadow roots, but it
     must be transparent to HTML authoring. Test the following conditions.
     1. Any slot attribute in children of <details> or <summary> must be
        ignored.
     2. Slot assignment for author shadow root must work as expected.
-->
<template>
  <details open>
    <summary slot="x">
      <span id="summary-span" slot="foo">Apple</span>
      <slot name="fruit"></slot>
    </summary>
    <slot></slot>
    Strawberry
  </details>
</template>
<div id="host"><span>Orange</span><span slot="fruit">Grape</span></div>
<script>
'use strict';

const template = document.querySelector('template');
const host = document.querySelector('#host');
const root = host.attachShadow({mode: 'open'});
root.appendChild(document.importNode(template.content, true));

const span = root.querySelector('#summary-span');
const root2 = span.attachShadow({mode: 'open'});
root2.innerHTML = `"<slot></slot>"`;
</script>
